<template>
  <view class='productList'>
    <StatusNav  :properties="statusNavProperties"/>
    <uv-notify ref="notify" message="success" type="success"></uv-notify>
    <uv-swiper
        :list="taskInfoGoods.mainPic"
        keyName="image"
        height="250"
        showTitle
        indicator
        :radius="0"
        :title-style="{color:'red',textAlign: 'center'}"
        indicatorStyle="right: 20px"
        @change="e => swiperCurrent = e.current"
        circular>
      <template v-slot:indicator>
        <view class="indicator-num">
          <text class="indicator-num__text">
            <text style="margin-right: 5px">图片</text>
            {{ swiperCurrent + 1 }}/{{ taskInfoGoods.mainPic.length }}
          </text>
        </view>
      </template>

    </uv-swiper>

    <view class="goods-info">
      <view class="goods">
        <view class="goods-price">
          <view class="price" :style="{color:themConfig.theme.color}">
            <view>
              <text class="money-dot">¥</text>
              <text class="money-value">{{ taskInfoGoods.salePrice }}</text>
            </view>
          </view>
          <view class="sales-num">已售{{ taskInfoGoods.salesNum + taskInfoGoods.virtualNum }}</view>
        </view>
        <view class="goods-info-title">
          <view style="font-size: 17px">
            【{{ taskInfoGoods.taskName }}】
          </view>
        </view>

        <view class="goods-content">
          <uv-text type="info" size="15" :text="taskInfoGoods.remark"></uv-text>
        </view>
      </view>

      <uv-gap height="5" bgColor=""></uv-gap>

      <!--          <view class="market skuinfo">-->
      <!--            <view>-->
      <!--              <uv-tags text="小件[20斤以内]" plain size="mini" type="warning"></uv-tags>-->
      <!--            </view>-->
      <!--            <view>-->
      <!--              <uv-tags text="中件[20斤以内]" plain size="mini" type="warning"></uv-tags>-->
      <!--            </view>-->
      <!--            <view>-->
      <!--              <uv-tags text="大件件[20斤以内]" plain size="mini" type="warning"></uv-tags>-->
      <!--            </view>-->
      <!--          </view>-->

      <uv-gap height="5" bgColor=""></uv-gap>

      <view class="market">
        <uv-cell-group>
          <uv-cell title="服务"
                   value="配送上门" :border="false">
          </uv-cell>

          <uv-cell title="红包"
                   value="暂无"
                   :isLink="true" :border="false">
          </uv-cell>

          <uv-cell title="配送"
                   value="平台配送" :border="false">
          </uv-cell>
          <uv-cell title="跑腿费"
                   :value="taskInfoGoods.errandChargeAmount" :border="false">
          </uv-cell>
        </uv-cell-group>
      </view>

      <uv-gap height="5" bgColor=""></uv-gap>

      <view class="goods-detail">
        <view class="goods-detail-title">
          <view>服务介绍</view>
        </view>
        <uv-divider></uv-divider>
        <view class="goods-body">
          <jyf-parser :html="taskInfoGoods.content" ref="article"></jyf-parser>
        </view>
      </view>
    </view>

    <!--        这里的高度就是 下面提交按钮的高度-->
    <uv-gap height="65" bgColor=""></uv-gap>


    <view class="button">
      <view class="money">
        <uv-image mode="widthFix" src="https://minio.thisforyou.cn:1443/common/run1.png" width="40px"></uv-image>
        <view :style="{color:themConfig.theme.color}">
          <text class="money-dot">¥</text>
          <text class="money-value">{{ taskInfoGoods.salePrice }}</text>
        </view>

      </view>
      <view class="submitBtn">
        <uv-button text="点这里下单" :disabled="btnDisabled" @click="submit"
                   :color="'linear-gradient(to right,' +themConfig.theme.subColor+', '+themConfig.theme.color+')'"></uv-button>
      </view>
    </view>


    <!--    设置表单-->
    <uv-popup :zIndex="10" @close="closeFormPopup" mode="bottom" closeable
              closeIconPos="top-right"
              :closeOnClickOverlay="true"
              custom-style="border-radius:10px" ref="formPopup">
      <view style="padding: 60rpx 30rpx 10rpx 30rpx">
        <view style="margin-top: 10rpx">


          <view class="sku-div">
            <view style="font-size: 20px;margin-bottom: 20px">选择规格信息</view>
            <view class="sku-item" v-for="sku in taskInfoGoods.skus">

              <uv-button @click="selectSku(sku)"
                         :customStyle="{padding:'30rpx'}"
                         :color="themConfig.theme.color"
                         :plain="sku.skuId!==form.skuId" :hairline="true">
                <template v-slot:default>
                  <view class="sku-price">
                    <view class="sku-price-text">
                      {{ sku.name }} ¥{{ sku.salesPrice }}/元
                    </view>
                    <view class="sku-desc-text">
                      <uv-text color="#c4c6c9" size="14" v-text="sku.desc"/>
                    </view>
                  </view>
                </template>
              </uv-button>

            </view>


          </view>


          <view class="sku-num">
            <view style="margin-right: 10px">
              <text style="font-size: 18px;margin-right: 5px">数量</text>
              x
            </view>
            <uv-number-box buttonSize="40" inputWidth="70" disabledInput :min="1" :max="99" :integer="true" :color="themConfig.theme.color"
                           v-model="form.num"></uv-number-box>

            <view style="margin: 0 10px;font-size: 22px">
              <text :style="{color:themConfig.theme.color}">¥</text>
              <text :style="{'font-size': '25px','margin-right': '5px',color:themConfig.theme.color}">{{
                  form.num * form.salesPrice
                }}
              </text>
            </view>
          </view>
          <view class="search-btn">
            <view class="btn">

              <uv-button :color="'linear-gradient(to right,' +themConfig.theme.subColor+', '+themConfig.theme.color+')'"
                         :iconColor="themConfig.theme.color"
                         text="确定" @click="closeFormPopup"></uv-button>
            </view>
          </view>
        </view>
      </view>
    </uv-popup>

    <FloatingBackHome/>
  </view>
</template>
<script>
import {mixins} from './index.js'
import RichText from "../../../components/school/richtext/index.vue";

export default {
  components: {RichText},
  mixins: [mixins]
}
</script>
<style scoped lang="scss">
@import './index.scss';

::v-deep .sku-item .uv-button {
  //padding: 30px !important;
  height: auto !important;
}
</style>
